<template>
	<view class="body" :style="'height:'+(height-(-50))+'px'">

		<!-- 呈现视频的展示图的元素
			:style中的样式是为了让其在切换视频展示图时有旋转效果（通过 hairChange() 方法） -->
		<view class="image_vs" :style="'transform: rotateY('+aaahearRotateY+'deg);'">

			<aaahear-image title="使用前" :shadowBool="shadowBool" />
			<view style="height: 70rpx;"></view>
			<aaahear-image title="使用后" :shadowBool="shadowBool" />

		</view>

		<!-- 让用户点击操作的按钮 -->
			<!-- 每两个元素之间参差的 <view style="height: 30rpx;" /> 仅仅是为了让元素之间间隔--> 
		<view class="click_on">

			<bygo-button src="/static/index/play.png" />
			<view style="height: 30rpx;" />
			<bygo-button src="/static/index/collect.png" />
			<view style="height: 30rpx;" />

			<bygo-button @click.native="hairChange()" src="/static/index/change.png" :style="'pointer-events:'+pointerEventsChange" />

			<!-- #ifndef APP-PLUS -->
			<!-- 给非app用户暂时的按钮，提示用户下载APP -->
			<view style="height: 30rpx;" />
			<view class="app_download">下载APP</view>
			<!-- #endif -->
		</view>

	<b-tabbar
			icon-size="55rpx"
			:list="list"
			inactive-color="rgba(255,255,255,.7)"
			active-color="rgba(255,255,255,1)"
			style="font-size: 50rpx;"/>

	</view>
</template>

<script>
	import bTabbar from '../../js/bTabbar.js';

	let list = bTabbar.getTabbarList();
	var data = {
		list: list,
		height: 0,
		list: list,
		current: 0,
		src1: "/static/1.jpg",
		src2: "/static/2.jpg",
		aaahearRotateY: 0,
		aaahearOpacity1: 1,
		pointerEventsPlay: null,
		pointerEventsChange: null,
		shadowBool: true,
		changeIngBool: false
	};

	export default {
		data() {
			return data
		},
		onLoad() {

		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					data.height = res.windowHeight;
				}
			});
		},
		methods: {
			hairChange() {
			// 	if (data.changeIngBool) {
			// 		return;
			// 	}

			// 	data.changeIngBool = true;
			// 	data.pointerEventsChange = 'none';

			// 	data.shadowBool = false;

			// 	var siv = setInterval(() => {
			// 		data.aaahearRotateY++;
			// 		if (data.aaahearRotateY == 90) {
			// 			data.aaahearRotateY = -90;
			// 			return;
			// 		}
			// 		if (data.aaahearRotateY == 0) {
			// 			data.aaahearRotateY = 0
			// 			data.shadowBool = true;
			// 			data.changeIngBool = false;
			// 			data.pointerEventsChange = 'auto';
			// 			clearInterval(siv);
			// 		}
			// 	}, 6);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100%;
		background:#00aaff;
		// background-image: url(../../static/cool-background.png);
	}

	.image_vs {
		position: fixed;
		bottom: 200rpx;
	}

	.click_on {
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;

		.app_download {
			background-color: rgba(255, 255, 255, .7);
			font-size: 30rpx;
			padding: 3rpx;
			width: 130rpx;
			border-radius: 30rpx;
			margin-left: 30rpx;
			font-weight: bold;
			text-align: center;
			bottom: 170rpx;
			color: rgba(255,255,255,.7);
			font-size: 30rpx;
			background: #00aaff;
			box-shadow:  5px 5px 10px #0092db, 
			             -5px -5px 10px #00c2ff;
		}
		
		.app_download:active{
			bottom: 205rpx;
			box-shadow:  3px 3px 10px #0092db, 
			             -3px -3px 10px #00c2ff;			
		}
	}
</style>
